<script setup lang='ts'>
import { ref ,defineAsyncComponent,computed,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  useMessage,
} from 'naive-ui'
import { setCookie } from '@/utils/setCookie'
import encry from '@/utils/md5'
import { doLogin } from '@/api/user'
import { t } from '@/locales'
import {UserInfo} from '@/typings/user'
import defaultAvatar from '@/assets/avatar.jpg'


import {ModelType} from "@/typings/user";


const router = useRouter()
// const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const user = ref<ModelType>(Object.create(null))
const rules = {
  account: {
    required: true,
    message: '请输入用户名',
    trigger: ['input', 'blur'],
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['input', 'blur'],
  },
}


// 点击登录
const handleValidateButtonClick = async (e: MouseEvent) => {
  e.preventDefault()
    const { account, password } = user.value
    if(!validateAccount(account)){
        message.error("账号格式不正确")
				return
    }
  if (account && password) {
    const res = await doLogin({botId:1,account:account,password:encry(password)})
		// 设置cookie，默认存活24小时
		setCookie('blueCat_token', res.id)
		setCookie('blueCat_user_account', res.account)
		router.push('/')
  }
}

const handleRegistBtnClick = async (e: MouseEvent) => {
  router.push('/regist')
}

type NInputThemeOverrides = NonNullable<NInput['themeOverrides']>
const nInputThemeOverrides: NInputThemeOverrides = {
    textColor: 'black',
    borderColor: 'black',
    placeholderColor: '#979793',
    hoverColor: 'black',
		border: '1px solid black'
}

function validateAccount(account:string) {
    if(!account){
        return false
    }
    const phoneRegex = /^1[3456789]\d{9}$/;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(account) || phoneRegex.test(account);;
}
</script>

<template>
	<div  id="app">
		<br><br>
		<br><br><br>
		<div class="flex justify-center" data-v-0ee1b774="">
			<img :src="defaultAvatar" alt="Robot Icon" class="mt-8 h-12 w-fit hover:cursor-pointer md:mt-0 md:h-16" data-v-0ee1b774="">
		</div>
		<br>
		<div
			class="relative mt-10 w-full overflow-hidden bg-white shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:h-min sm:max-w-4xl sm:rounded-lg lg:max-w-5xl 2xl:max-w-6xl"
			data-v-0ee1b774=""><!---->
			<div  class="pt-4 px-6 pb-8 sm:px-10" data-v-0ee1b774="">
				<main class="mx-auto sm:max-w-4xl lg:max-w-5xl 2xl:max-w-6xl" data-v-0ee1b774=""><!--[--><!--[--><!--[-->
					<div class="nuxt-loading-indicator"
							 style="position: fixed; top: 0px; right: 0px; left: 0px; pointer-events: none; width: 0%; height: 3px; opacity: 0; background: rgb(45, 212, 191); transition: width 0.1s ease 0s, height 0.4s ease 0s, opacity 0.4s ease 0s; z-index: 999999;"></div>
					<div >
						<div>
							<div  class="my-4 flex min-h-full flex-col justify-center space-y-8 sm:px-6 lg:px-8">
								<div class="sm:mx-auto sm:w-full sm:max-w-md"><h2
									class="text-center text-3xl font-bold tracking-tight text-gray-900">登录</h2>
									<p class="mt-2 text-center text-sm text-gray-600"> 或者
										<a href="#/regist" style="font-size: 18px" class="font-semibold text-teal-500 hover:text-teal-600">注册</a> 并免费体验ChatGPT
									</p>
								</div>
								<div class="sm:mx-auto sm:w-full sm:max-w-sm">
									<form class="space-y-6">
										<div>
											<label for="email" class="block text-sm font-medium text-gray-700">邮箱或者电话号码</label>
											<div class="mt-1">

												<input id="email"  v-model="user.account" :allow-input="(val) => { return !/[^A-Za-z0-9_@.]/g.test(val) }" maxlength="32"  placeholder="请输入邮箱或者电话号码" name="email"
															 type="email" autocomplete="email" required="true"
															 class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-teal-500 focus:outline-none focus:ring-teal-500 sm:text-sm">
											</div>
										</div>
										<div>
											<label for="password" class="block text-sm font-medium text-gray-700">密码</label>
											<div class="mt-1">
												<input id="password" maxLength = "16" v-model="user.password"  placeholder="请输入密码" name="password"
															 type="password"  required="true"
															 class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-teal-500 focus:outline-none focus:ring-teal-500 sm:text-sm">
											</div>
											<!--											<a href="/resetpassword" class="text-teal-500 hover:text-teal-600 text-xs mt-2"> Forgot your password? </a>-->
										</div><!----><!----><!---->
										<div>
											<button @click="handleValidateButtonClick" type="submit"
															class="inline-flex items-center rounded-md border border-transparent font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-teal-800 bg-teal-600 text-white hover:bg-teal-700 focus:ring-teal-500 px-4 py-2 text-sm flex w-full justify-center rounded-md border border-transparent bg-teal-500 py-2 px-4 text-sm font-medium text-white shadow-sm transition hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2">
												<!--[-->登录<!--]--><!----></button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</main>
			</div>
		</div>
	</div>
</template>

<style scoped>
	#app {
		background-image: url('@/assets/background.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}
</style>
